<template>
  <view class="container">
  
    
    <view class="bg-image">
      <image src="/static/bg15.png" mode="aspectFill"></image>
      <view class="bg2-overlay">
        <image src="/static/log12.png" mode="aspectFit"></image>
      </view>
    </view>
    
    <view class="form-container">
      <view class="form-item">
        <text class="label">姓名 Name：</text>
        <view class="input-with-icon">
          <image class="input-icon" src="/static/logo1.png" mode="aspectFit"></image>
          <input class="input" type="text" v-model="form.name" />
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">学号Student ID：</text>
        <view class="input-with-icon">
          <image class="input-icon" src="/static/logo2.png" mode="aspectFit"></image>
          <input class="input" type="text" password="true" v-model="form.studentId" />
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">证件号ID Number：</text>
        <view class="input-with-icon">
          <image class="input-icon" src="/static/logo3.png" mode="aspectFit"></image>
          <input class="input" type="text" password="true" v-model="form.idNumber" />
        </view>
      </view>
      
      <button class="submit-btn" @click="submit">领取周边 Submit</button>
    </view>
    
    <view class="footer">
      <text>成芯软件提供技术支持</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        studentId: '',
        idNumber: ''
      }
    }
  },
  methods: {
    submit() {
      // 提交表单的逻辑
      console.log('表单提交', this.form)
      // 这里可以添加表单验证和提交到服务器的代码
      uni.showToast({
        title: '提交成功',
        icon: 'success',
        duration: 1500,
        success: () => {
          // 跳转到地址填写页面c
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/erweima/erweima'
            })
          }, 1500)
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}




.more-btn {
  font-size: 40rpx;
  color: #333;
}

.title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.bg-image {
  width: 100%;
  height: 250px;
  position: relative;
 
}

.bg-image image {
  width: 100%;
  height: 100%;
}

.bg2-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg2-overlay image {
  max-width: 100%;
  max-height: 100%;
}

.form-container {
  flex: 1;
  padding: 80rpx 30rpx;
  background-color: #fff;
  border-radius: 80rpx;
  top:10px;
 
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 60rpx;
}

.label {
  display: block;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
}

.input-with-icon {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.input-icon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 10rpx;
}

.input {
  flex: 1;
  height: 100%;
  border: none;
  padding: 0 20rpx 0 0;
  font-size: 28rpx;
  box-sizing: border-box;
}

.input:focus {
  outline: none;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #1890ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.footer {
  
  padding: 20rpx 0;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  background-color: #fff;
}
</style>